<template>
	<view>	
		<view class="issue-head-star-box" v-if="starsShow">
			<image class="isstar" v-for="(item,index) in starsMax" :key="index" :src="(index+1)>formatScore?starDefault:starActive" :class="formatScore==index+1?'active':''" mode="" @click="setScore(index+1)"></image>
		</view>	
	</view>
</template>
<script>
	export default {
		data() { 
			return { iscore: 0 } 
		},
		props:{
			starsShow:{
				type:[String,Boolean],
				default:true,
			},
			starsMax:{ // 星星最大个数
				type:[String,Number],
				default:5,
			},
			starDefault:{ //未选中
				type:String,
				default:require('@/static/rate/star_empty1.png'),
			},
			starActive:{
				type:String,
				default:require('@/static/rate/star1.png'),
			},
			score:{  //默认分数
				type:[Number,String],
				default:0
			},
			starsDisabled:{ //是否禁用star
				type:[Boolean],
				default:false
			},
			infoReceive:{ // 获取值
				type:Object,
				default:function(){
					return {
						score:0,
					}
				}
			}
		},
		computed:{
			formatScore(){
				return this.score
			}
		},
		methods: {
			/**
			 * @name 设置分数
			 */
			setScore(score){
				if(this.starsDisabled!==false)return
				this.infoReceive.score=score 
				 this.iscore = score
				 this.$emit('submit',score)
			},	
			/**
			 * @name 提交
			 */
			doSubmit(){
				this.$emit('submit',this.infoReceive)
			}
		},
		created() {
			this.iscore = this.score
			this.infoReceive.score=this.score
		}
	}
</script>
<style scoped>
	.issue-head-star-box{
		display: inline-block;
	}
	.isstar{
		width:48upx;
		height:48upx;
		vertical-align: middle;
		margin-right: 14upx;
	}
	.isstar.active{
		animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
	}

	@keyframes star_move{
		from{
			width:48upx;
			height:48upx;
			transform: rotate(180deg)
		}
		to{
			width:48upx;
			height:48upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
